<template>
  <a-drawer v-model:visible="visible" :title="modalTitle" width="80%" :closable="false"
    :footer-style="{ textAlign: 'right' }">
    <a-row :gutter="20" type="flex">
      <a-card title="基本资料" class="base_card" :bodyStyle="{ padding: '20px 40px' }">
        <a-row type="flex" :gutter="20" class="mb-3">
          <a-col :span="12">
            <a-row>
              <a-avatar :src="state.info?.img" :size="50">
                <template #icon>
                  <UserOutlined />
                </template>
              </a-avatar>
              <a-col :span="20" class="info">
                <div class="userName mb-3">{{ state.info?.nickname }}</div>
                <a-row type="flex">
                  <a-col :span="12">手机号：{{ state.info?.mobile }}</a-col>
                  <a-col :span="12">邀请码：{{ state.info.info.invite_code }}</a-col>
                </a-row>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="3">
            <div class="header-title">
              余额
              <a-button type="link" @click="updateBalance(state.info.user_id)">修改</a-button>
            </div>
            <div class="val">{{ state.info.assets?.balance }}</div>
            <EditBalance ref="editBalance" @modal-success="refresh" />
          </a-col>
          <a-col :span="3">
            <div class="header-title">
              红包
              <a-button type="link" @click="updateRed(state.info.user_id)">修改</a-button>
            </div>
            <div class="val">{{ state.info.assets?.red }}</div>
            <EditRed ref="editRed" @modal-success="refresh"></EditRed>
          </a-col>
          <a-col :span="3">
            <div class="header-title">
              积分
              <a-button type="link" @click="updateBonus(state.info.user_id)">修改</a-button>
            </div>
            <div class="val">{{ state.info.assets?.bonus }}</div>
            <EditBonus ref="editBonus" @modal-success="refresh" />
          </a-col>
          <a-col :span="3">
            <div class="header-title">
              能量
              <a-button type="link" @click="updateEnergy(state.info.user_id)">修改</a-button>
            </div>
            <div class="val">{{ state.info.assets?.energy }}</div>
            <EditEnergy ref="editEnergy" @modal-success="refresh" />
          </a-col>
        </a-row>
        <a-descriptions title="推荐人" :column="3">
          <a-descriptions-item label="昵称">
            {{ state.info.p_info?.nickname || "-" }}
          </a-descriptions-item>
          <a-descriptions-item label="手机号">
            {{ state.info.p_info?.mobile || "-" }}
          </a-descriptions-item>
          <a-descriptions-item label="绑定时间">{{
            state.info.p_info.create_time
          }}</a-descriptions-item>
        </a-descriptions>
        <a-descriptions title="团长信息" :column="4" v-if="state.info.userTuan">
          <a-descriptions-item label="团长名称">
            {{ state.info.userTuan.name || "-" }}
          </a-descriptions-item>
          <a-descriptions-item label="一级分销比例">
            {{ state.info.userTuan.one_rebate || "-" }}%
          </a-descriptions-item>
          <a-descriptions-item label="二级分销比例">
            {{ state.info.userTuan.two_rebate || "-" }}%
          </a-descriptions-item>
          <a-descriptions-item label="状态">
            {{ state.info.userTuan.status == 1 ? "开启" : "关闭" }}
          </a-descriptions-item>
        </a-descriptions>
      </a-card>
    </a-row>
    <div class="mt-3">
      <a-tabs v-model:activeKey="state.activeKey">
        <a-tab-pane key="1" tab="登录记录">
          <LoginLog :id="id" ref="loginRef" />
        </a-tab-pane>
        <a-tab-pane key="2" tab="资金记录">
          <CapitalLog :id="id" ref="capitalRef" />
        </a-tab-pane>
        <a-tab-pane key="3" tab="能量记录">
          <EnergyLog :id="id" ref="energyRef" />
        </a-tab-pane>
        <a-tab-pane key="4" tab="积分记录">
          <BonusLog :id="id" ref="bonusRef" />
        </a-tab-pane>
        <a-tab-pane key="5" tab="红包记录">
          <RedLog :id="id" ref="redRef" />
        </a-tab-pane>
      </a-tabs>
    </div>
  </a-drawer>
</template>
<script setup>
import { UserOutlined } from "@ant-design/icons-vue";
import { reactive, ref } from "vue";
import { info } from "@/api/user";
import EditBalance from "./components/EditBalance.vue";
import EditBonus from "./components/EditBonus.vue";
import EditEnergy from "./components/EditEnergy.vue";
import EditRed from "./components/EditRed.vue";
import LoginLog from "./tabs/LoginLog.vue";
import CapitalLog from "./tabs/CapitalLog.vue";
import EnergyLog from "./tabs/EnergyLog.vue";
import BonusLog from "./tabs/BonusLog.vue";
import RedLog from "./tabs/RedLog.vue";

const id = ref(0);
const visible = ref(false);

const modalTitle = ref("");
const editBonus = ref();
const editBalance = ref();
const editEnergy = ref();
const editRed = ref();

const energyRef = ref();
const capitalRef = ref();
const loginRef = ref();
const bonusRef = ref();

const state = reactive({
  activeKey: "1",
  pagination: {
    total: 0,
    showSizeChanger: true, //是否页码可以改变
    current: 1, //当前xx页面
    pageSize: 5, //一页展示xx条数据
    showTotal: function (total) {
      return "总共" + total + "条数据";
    }, //总共xx条
    showQuickJumper: true,
  }, //分页数据
  searchParams: {
    page: 1,
    limit: 5,
  },
  loading: false,
  info: {
    alipay: {},
    assets: {},
    info: {},
    p_info: {},
    userTuan: {}
  },
});

const show = (record) => {
  visible.value = true;
  modalTitle.value = "用户详情";
  state.activeKey = "1";
  id.value = record.user_id;
  getDetails(record.user_id);
};
// 详情
const getDetails = (id) => {
  info({
    id: id,
  }).then((res) => {
    if (res.code == 0) {
      const data = res.data;
      state.info = Object.assign({}, data);
    }
  });
};

const updateBalance = (id) => {
  editBalance.value.show(id);
};
const updateBonus = (id) => {
  editBonus.value.show(id);
};
const updateEnergy = (id) => {
  editEnergy.value.show(id);
};
const updateRed = (id) => {
  editRed.value.show(id);
};
const refresh = () => {
  getDetails(id.value);
  energyRef.value?.loadData();
  loginRef.value?.loadData();
  capitalRef.value?.loadData();
  bonusRef.value?.loadData();
};

defineExpose({
  show,
});
</script>
<style lang="scss" scoped>
.userName {
  font-weight: bold;
  font-size: 18px;
}

.info {
  padding: 0 10px;
}

.header-title {
  line-height: 32px;
}

.val {
  font-weight: bold;
  color: #1890ff;
  font-size: 18px;
}
</style>